<template>
    <div class="more-list">
      <h3>{{this.$route.params.title}}</h3>
      <VuePullRefresh :on-refresh="onRefresh">
        <div class="list">
          <router-link tag="div" v-for="(song,index) in moreListData" :to="{name:'musicPlay',params:{songId:song.song_id}}" class="item"  v-bind:key="index">
            <div class="poster">
              <img :src="song.pic_big" alt="">
            </div>
            <div class="text-warp">
              <div class="title">
                {{song.title}}
              </div>
              <div class="author">
                {{song.artist_name}}
              </div>
            </div>
          </router-link>
        </div>
      </VuePullRefresh>

    </div>
</template>

<script>
  import VuePullRefresh  from 'vue-pull-refresh'
    export default {
        name: "moreList",
        data(){
          return{
            type:this.$route.params.type,
            moreListData:[],
            offset:0
          }
        },
      components:{
        VuePullRefresh
      },
      methods:{
        onRefresh(){
          var that = this;
          const moreListUrl = this.host + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+ this.type +"&size=12&offset="+this.offset;
          return new Promise(function (resolve, reject) {
            setTimeout(() => {
              that.$axios.get(moreListUrl)
                .then(res => {

                   that.offset >= res.data.billboard.billboard_songnum - 12 ? console.log("没数据了") : that.offset += 12;
                    that.moreListData = res.data.song_list
                  resolve();
                })
                .catch(error => {
                  console.log(error);
                })
            })
          });

        }
      },
      async mounted(){
          if(this.type !='undefined'){
            const moreListUrl = this.host + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+ this.type +"&size=12&offset=0"
            this.$axios.get(moreListUrl)
              .then(res => {
                this.moreListData = res.data.song_list
                this.offset = this.offset+12
              })
              .catch(error => {
                console.log(error);
              })

          }

       }
    }
</script>

<style scoped lang="less">
  .more-list{
    h3{
      font-size: 20px;
      line-height: 50px;
      padding-left: 17px;
      color: #666;
      background-color: #fff;
    }
    .list{
      padding: 0 17px;
      background-color: #fff;
      display:flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item{
        flex: 0 0 48%;
        width: 48%;
        margin-bottom: 15px;
        .poster{
          img{
            width: 100%;
          }
        }
        .text-warp{
          .title{
            line-height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .author{
            font-size: 12px;
            line-height: 18px;
            color: #999;

          }
        }
      }

    }
  }
</style>
